<template>
	<div class="LoginMaxboxs">
		<el-row>
			<el-col :span="24">
				<el-col :span="6" :xs="0" :sm="6" :md="6" :lg="6">
					<div class="LoginleBox">
						<p class="Loginle-p">锦锐科技</p>
						<p class="Loginle-p2">专业可信赖的云测试平台</p>
						<ul class="Loginle-ulli">
							<li class="li1">百万级全链路压力测试实时发压</li>
							<li class="li1">API管理、测试、监控全生命周期管理</li>
							<li class="li1">海量终端设备在线操控、调试</li>
							<li class="li1">私有化部署搭建私有后台、UI、终端测试平台</li>
							<li class="li1">行业测试专家提供多项专业测试服务</li>
						</ul>
					</div>
				</el-col>
				<el-col :span="18" :xs="24" :sm="18" :md="18" :lg="18">
					<div class="LoginriBox">
						<div class="loginform">
							<h5 class="logintitle">账号登录</h5>
							<el-input v-model="name" placeholder="请输入您的手机号" style="margin: 50px 0 20px 0;"></el-input>
							<el-input v-model="password" placeholder="请输入您的密码"></el-input>
							<p class="wangjimima" @click="ForgetMima"><span>忘记密码?</span></p>
							<el-button class="LoginBut" @click="gotohome">登录</el-button>
							<p class="yhxieyi">登录即视为同意《用户协议》</p>
							<p class="logintype"><span>验证码登录</span><span @click="gotoregi">注册账号</span></p>
						</div>
					</div>

				</el-col>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				name: '',
				password: ''
			}
		},
		methods: {
			gotoregi() {
				this.$router.push({
						path: '/register'
					}
				)
			},
			ForgetMima() {
				this.$router.push({
						path: '/retrievepassword'
					}

				)
			},
			gotohome(){
				this.$router.push({
						path: '/'
					}

				)
			}
			
		}
	}
</script>
<style scoped lang="scss">
	.LoginMaxboxs {
		width: 100%;
		height: 100vh;
	}

	.LoginleBox {
		width: 100%;
		height: 100vh;
		background-image: url('../../assets/images/banner/loginlebgc.png');
		background-size: 100% 100vh;
		overflow: hidden;
		padding: 0 0 0 15%;

		.Loginle-p {
			margin-top: 167px;
			opacity: 1;
			font-family: Source Han Sans;
			font-size: 36px;
			font-weight: 500;
			color: #FFFFFF;
		}

		.Loginle-p2 {
			font-family: Source Han Sans;
			font-size: 24px;
			color: #FFFFFF;
		}

		.Loginle-ulli {
			margin-top: 50px;

			.li1 {
				color: #fff;
			}
		}
	}

	.LoginriBox {
		width: 100%;
		height: 100vh;
		background-color: #fafafa;
		display: flex;
		align-items: center;
		justify-content: center;

		.loginform {
			// width: 480px;
			// height: 55%;
			border-radius: 20px;
			background-color: #fff;
			padding: 0 8%;

			.logintitle {
				text-align: center;
				margin-top: 100px;
				font-size: 24px;
				color: #3d3d3d;
			}

			.wangjimima {
				text-align: right;
				margin: 20px 0;
				font-size: 12px;
				color: #7E7E7E;
				cursor: pointer;
			}

			.LoginBut {
				width: 100%;
				background-color: #0457F2;
				border-radius: 5px;
				color: #fff;
				margin: 0 0 5px 0;
			}

			.yhxieyi {
				text-align: center;
				font-size: 12px;
				color: #7E7E7E;

			}

			.logintype {
				margin: 60px 0 40px 0;
				display: flex;
				align-items: center;
				justify-content: space-around;
				cursor: pointer;
			}
		}
	}

	::v-deep .el-input__inner {
		background-color: #f1f1f1;
		height: 47px;
		border-radius: 10px;
		border: none;
	}
</style>